import React, { useEffect, useState, useRef } from 'react';
import { connect } from 'umi';
import { Form, Button, Card, Input, InputNumber, Popover, Checkbox } from 'antd';
import FormCondition from '@/components/FormCondition';
import { Row, Col, Tooltip, Space } from 'antd'
import FlxButton from '@/components/FlxButton'
const validUserCondition = (props) => {
    const { dispatch } = props;
    const [data, setData] = useState({
        costConditionFlag: '0',
        userConditionFlag: '0',
        promoterConditionFlag: '0',
        validPromoterConditionFlag: '0',
        validPromoterUserConditionValue: 0,
        orderConditionFlag: '0',
        shareConditionFlag: '0',
        userConditionValue: 0,
        costConditionValue: 0,
        promoterConditionValue: 0,
        validPromoterConditionValue: 0,
        validPromoterUserConditionFlag: 0,
        orderConditionValue: 0,
        shareConditionValue: 0,
    })
    const {
        costConditionFlag,
        costConditionValue,
        userConditionFlag,
        userConditionValue,
        promoterConditionFlag,
        promoterConditionValue,
        validPromoterConditionFlag,
        validPromoterConditionValue,
        validPromoterUserConditionFlag,
        validPromoterUserConditionValue,
        orderConditionValue,
        orderConditionFlag,
        shareConditionValue,
        shareConditionFlag,
    } = data
    const [params, setParams] = useState({})
    const fetchData = () => {


        dispatch({
            type: 'promoter/fetchPromoterConfigDetail',
            callback: (e) => {
                const { id, validPromoterCondition } = e
                const obj = validPromoterCondition.length > 0 ? JSON.parse(validPromoterCondition) : {}
                const { userConditionValue,
                    costConditionValue,
                    promoterConditionValue,
                    validPromoterConditionValue,
                    validPromoterUserConditionValue,
                    orderConditionValue,
                    shareConditionValue, } = obj
                if (userConditionValue) {
                    obj.userConditionFlag = '1'
                }
                if (costConditionValue) {
                    obj.costConditionFlag = '1'
                }
                if (promoterConditionValue) {
                    obj.promoterConditionFlag = '1'
                }
                if (validPromoterConditionValue) {
                    obj.validPromoterConditionFlag = '1'
                }
                if (validPromoterUserConditionValue) {
                    obj.validPromoterUserConditionFlag = '1'
                }
                if (orderConditionValue) {
                    obj.orderConditionFlag = orderConditionFlag
                }
                if (shareConditionValue) {
                    obj.shareConditionFlag = shareConditionFlag
                }
                setData({
                    ...data,
                    ...obj,
                })
                setParams({
                    id
                })
            }
        })
    }
    const fetchRoleEdit = () => {
        const {
            userConditionValue,
            costConditionValue,
            promoterConditionValue,
            validPromoterConditionValue,
            validPromoterUserConditionValue,
            orderConditionValue,
            shareConditionValue,
        } = data
        let obj = {

        }
        if (userConditionValue && userConditionFlag === '1') {
            obj.userConditionValue = userConditionValue
        }
        if (costConditionValue && costConditionFlag === '1') {
            obj.costConditionValue = costConditionValue
        }
        if (promoterConditionValue && promoterConditionFlag === '1') {
            obj.promoterConditionValue = promoterConditionValue
        }
        if (validPromoterConditionValue && validPromoterConditionFlag === '1') {
            obj.validPromoterConditionValue = validPromoterConditionValue
        }
        if (validPromoterUserConditionValue && validPromoterUserConditionFlag === '1') {
            obj.validPromoterUserConditionValue = validPromoterUserConditionValue
        }
        if (orderConditionValue && orderConditionFlag === '1') {
            obj.orderConditionValue = orderConditionValue
        }
        if (shareConditionValue && shareConditionFlag === '1') {
            obj.shareConditionValue = shareConditionValue
        }
        dispatch({
            type: 'promoter/fetchPromofakeSavePromoterConfigterWebPage',
            payload: {
                ...params,
                validPromoterCondition: JSON.stringify(obj)
            },
            callback: () => {
                fetchData()
            }
        })


    };
    useEffect(() => {
        fetchData()
    }, [])

    return (
        <div style={{}}>
            <Row>
                <Col span={24}>
                    <div style={{ paddingTop: 12 }}>
                        <Space direction='vertical'>
                            <Space>
                                <div style={{ width: 140 }}>
                                    <Checkbox
                                        checked={userConditionFlag === '1' ? true : false}
                                        onChange={(e) => {
                                            setData({
                                                ...data,
                                                userConditionFlag: e.target.checked ? '1' : '0'
                                            })
                                        }}>累计邀请客户</Checkbox>
                                </div>

                                <InputNumber onChange={(e) => {
                                    setData({
                                        ...data,
                                        userConditionValue: e
                                    })
                                }} disabled={userConditionFlag !== '1'} value={userConditionValue}>
                                </InputNumber>
                                人
                            </Space>
                            <Space>
                                <div style={{ width: 140 }}>
                                    <Checkbox
                                        checked={costConditionFlag === '1' ? true : false}
                                        onChange={(e) => {
                                            setData({
                                                ...data,
                                                costConditionFlag: e.target.checked ? '1' : '0'
                                            })
                                        }}>客户累计消费</Checkbox>
                                </div>

                                <InputNumber onChange={(e) => {
                                    setData({
                                        ...data,
                                        costConditionValue: e
                                    })
                                }} disabled={costConditionFlag !== '1'} value={costConditionValue}>
                                </InputNumber>
                                元
                            </Space>
                            <Space>
                                <div style={{ width: 140 }}>
                                    <Checkbox
                                        checked={promoterConditionFlag === '1' ? true : false}
                                        onChange={(e) => {
                                            setData({
                                                ...data,
                                                promoterConditionFlag: e.target.checked ? '1' : '0'
                                            })
                                        }}>累计邀请推广员</Checkbox>
                                </div>

                                <InputNumber onChange={(e) => {
                                    setData({
                                        ...data,
                                        promoterConditionValue: e
                                    })
                                }} disabled={promoterConditionFlag !== '1'} value={promoterConditionValue}>
                                </InputNumber>
                                人
                            </Space>
                            <Space>
                                <div style={{ width: 140 }}>
                                    <Checkbox
                                        checked={orderConditionFlag === '1' ? true : false}
                                        onChange={(e) => {
                                            setData({
                                                ...data,
                                                orderConditionFlag: e.target.checked ? '1' : '0'
                                            })
                                        }}>订单条件</Checkbox>
                                </div>

                                <InputNumber onChange={(e) => {
                                    setData({
                                        ...data,
                                        orderConditionValue: e
                                    })
                                }} disabled={orderConditionFlag !== '1'} value={orderConditionValue}>
                                </InputNumber>
                                个
                            </Space>
                            <Space>
                                <div style={{ width: 140 }}>
                                    <Checkbox
                                        checked={shareConditionFlag === '1' ? true : false}
                                        onChange={(e) => {
                                            setData({
                                                ...data,
                                                shareConditionFlag: e.target.checked ? '1' : '0'
                                            })
                                        }}>内容分享条件</Checkbox>
                                </div>
                                <InputNumber onChange={(e) => {
                                    setData({
                                        ...data,
                                        shareConditionValue: e
                                    })
                                }} disabled={shareConditionFlag !== '1'} value={shareConditionValue}>
                                </InputNumber>
                                个
                            </Space>
                        </Space>

                    </div>
                </Col>
                <FlxButton onOk={fetchRoleEdit}></FlxButton>
            </Row>

        </div>
    );
}
export default connect(({ loading }) => ({
    loading: loading.models.promoter,
}))(validUserCondition);
